<template>
	<view class="common-list u-f animate__animated animate__fadeInLeft animate__slow">
		<!-- 左侧 -->
		<view class="common-list-l">
			<!-- 头像 -->
			<image :src="item.avatar" mode="widthFix" lazy-load></image>
		</view>
		<!-- 右侧 -->
		<view class="common-list-r">
			<!-- 昵称、性别、年龄、关注 -->
			<view class="u-f-ac u-f-jsb">
				<!-- 昵称、性别、年龄 -->
				<view class="u-f-ac">
					{{item.nickname}}
					<tag-sex-age :sex="item.sex" :age="item.age"></tag-sex-age>
				</view>
				<!-- 关注 -->
				<view v-show="!isfollow" @tap="follow" class="icon iconfont icon-zengjia1" >
					关注
				</view>
			</view>
			<!-- 内容 -->
			<view>
				{{item.title}}
			</view>
			<!-- 封面图 -->
			<view class="u-f-ajc">
				<!-- 封面图片 -->
				<image v-if="item.cover" :src="item.cover" mode="widthFix" lazy-load></image>
				<!-- 视频组件 -->
				<template v-if="item.video">
					<view class="common-list-play icon iconfont icon-bofang"></view>
					<view class="common-list-playinfo">
						{{item.video.looknum}} 次播放 {{item.video.time}}
					</view>
				</template>
				<!-- 分享 -->
				<view v-if="item.share" class="common-list-share u-f-ac">
					<image :src="item.share.cover" mode="widthFix" lazy-load></image>
					<view>{{item.share.title}}</view>
				</view>
			</view>
			<!-- 操作栏 -->
			<view class="u-f-ac u-f-jsb">
				<!-- 地址 -->
				<view class="icon iconfont icon-dizhi">{{item.address}}</view>
				<!-- 操作图标 -->
				<view class="u-f-ac u-f-jsb">
					<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
					<view class="icon iconfont icon-pinglun">{{item.commentnum}}</view>
					<view class="icon iconfont icon-dianzan">{{item.likenum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tagSexAge from './tag-sex-age.vue';
	export default{
		components:{
			tagSexAge
		},
		props:{
			item: Object,
			index: Number
		},
		data() {
			return {
				isfollow: this.item.isfollow
			}
		},
		methods: {
			follow(){
				this.isfollow = true;
				uni.showToast({
					title: '关注成功'
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../common/list.css';
</style>
